import React, { useEffect, useState } from 'react'
import { Row, Col, Card, Pagination, Descriptions } from 'antd'

import './index.less'
import { useDispatch, useSelector } from 'react-redux';
import { getPmmlList } from '../../redux/actions/pmml/pmmlAction'

import NewModal from './new/newModal'
import SearchBtn from './search/searchBtn'
import EditBtn from './edit/editBtn'
import PublishBtn from './publish/publishBtn'
import DeleteBtn from './delete/deleteBtn'

const Pmml = props => {

    const [ page, setPage ] = useState(1)

    // 获取store中的状态值
    const list = useSelector(state => state.pmmlStateReducer.models)
    const total_count = useSelector(state => state.pmmlStateReducer.totalSize)
    const currentPage = useSelector(state => state.pmmlStateReducer.currentPage)
    const predictUrl = useSelector(state => state.pmmlStateReducer.predictUrl)
    // 获取store对象中dispatch的引用
    const dispatch = useDispatch()

    useEffect(() => {
        /** 数据库从0开始，antd分页从1开始 */
        dispatch(getPmmlList(page-1))
    }, [])

    // 页码切换
    function onChange(page, pageSize) {
        dispatch(getPmmlList(page-1))
        setPage(page)
    }

    // 列表渲染
    function renderFileMenu(data) {
        /** 无模型时做校验判断 */
        if (data === undefined) {
            return null
        }
        return data.map(item => {
                return <Col span={4}>
                            <Card
                                key={item.id}
                                className="card-info"
                                title={item.name}
                                extra={item.categoryName}
                                hoverable={true}
                            >
                                <Descriptions className="card-info-text">
                                    <Descriptions.Item>
                                        {item.description}
                                    </Descriptions.Item>
                                </Descriptions>
                                <div className="card-info-button">
                                    <EditBtn item={item} />
                                    <PublishBtn item={item} uri={predictUrl}/>
                                    <DeleteBtn id={item.id} />
                                </div>
                            </Card>
                        </Col>
        })
    }

    return (
        <div className="manager-wrap">
            <div className="manager-wrap-head">
                <div className="manager-head-left">
                    <SearchBtn />
                </div>
                <div className="manager-head-right">
                    <NewModal />
                </div>
            </div>
            <div className="manager-wrap-content">
                <Row className="col-wrap-option">
                    { renderFileMenu(list) }
                </Row>
            </div>
            <div className="manager-wrap-page">
                <Pagination
                    onChange={() => onChange()}
                    /** 后端从1开始，前端从0开始 */
                    current={currentPage + 1}
                    defaultPageSize={12}
                    total={total_count}
                /> 
            </div>
        </div>
    )
}

export default Pmml